<template>
  <div>
    <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-field
        v-model="tel"
        left-icon="smile-o"
        type="tel"
        clearable
        placeholder="请输入手机号"
        :autocomplete="false"
      />
    </van-cell-group>
    <van-cell-group>
      <!-- 输入密码 -->

      <van-field
        v-model="sms"
        center
        clearable
        left-icon="smile-o"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>
    </van-cell-group>
    <van-button class="loginbtn" type="info">登录</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tel: '',
      sms: ''
    }
  },
  methods: {
    onClickLeft() {
      this.$toast('返回')
    }
  }
}
</script>

<style scoped>
.loginbtn {
  display: block;
  text-align: center;
  margin: 0.6rem auto;
  width: 95%;
}
</style>
